<template>
  <ElButton @click="(dialogData.model = true), (dialogData.type = 'add')">添加</ElButton>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="id" width="280" />
    <el-table-column prop="name" label="名称" />
    <el-table-column prop="remark" label="备注" />

    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small"
          @click="(dialogData.model = true), (dialogData.type = 'edit'), (dialogData.id = scope.row.id)">编辑</el-button>
        <el-button size="small" type="danger" @click="del(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>

  </el-table>
  <el-dialog v-model="dialogData.model" :title="dialogData.type == 'add' ? '添加' : '编辑'" width="800">
    <typeManage @item="close" :id="dialogData.id" :type="dialogData.type" L></typeManage>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { WordTypeList as getList, RoleDel as dels } from '../../api/api';
import { ElButton } from "element-plus";
import { ElMessageBox, ElMessage } from 'element-plus'
import typeManage from "./typeManage.vue"
const dialogData = ref({
  model: false,
  type: 'add',
  id: ''
})
const tableData = ref([])
onMounted(() => {
  loadList();
});
const loadList = () => {
  try {
    // 这里应该是发送登录请求的代码，例如使用axios或者其他HTTP客户端
    getList({}).then((res) => {
      console.log('res', res)
      tableData.value = res.data

    })

  } catch (error) {
    // 处理登录失败的情况
    console.error('error', error);
    // 可以在这里提示用户登录失败的信息
  }
};
const close = () => {
  dialogData.value = { model: false }
  loadList();
}
//删除
const del = (id) => {
  console.log(id)
  ElMessageBox.confirm(
    '确定删除吗?',
    '操作',
    {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      console.log(123)
      dels({id:id}).then((res) => {
        console.log('res', res)
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        loadList();

      })

    })
    .catch(() => {  
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })

}


</script>
